<template>
    <div class="picking zy-content ">
        <!--查询条件-->
      <div class="searchBox search-box-layout">
        <Row :gutter="24">
          <Col span="4">
            <div>
              <p class="label">{{$t('preliminary.ContractNumber')}}</p>
              <div class="ipt">
                <Input type="text" v-model="searchParams.contractNo"
                       :placeholder="`${$t('common.inputInfo')}`" class="inputBorder"
                       :maxlength="32"></Input>
              </div>
            </div>
          </Col>
          <Col span="4">
            <div>
              <p class="label">{{$t('preliminary.PurchasingOrderNumber')}}</p>
              <div class="ipt">
                <Input type="text" v-model="searchParams.ebeln" :placeholder="`${$t('common.inputInfo')}`"
                       class="inputBorder" :maxlength="32"></Input>
              </div>
            </div>
          </Col>
          <Col span="4">
            <div>
              <p class="label">{{$t('equipmentscrapped.AssetNo')}}</p>
              <div class="ipt">
                <Input type="text" v-model="searchParams.assetsNo"
                       :placeholder="`${$t('common.inputInfo')}`" class="inputBorder"
                       :maxlength="32"></Input>
              </div>
            </div>
          </Col>
          <Col span="4">
            <div>
              <p class="label">{{$t('preliminary.EquipmentName')}}</p>
              <div class="ipt">
                <Input type="text" v-model="searchParams.deviceName"
                       :placeholder="`${$t('common.inputInfo')}`" class="inputBorder"
                       :maxlength="32"></Input>
              </div>
            </div>
          </Col>
          <Col span="4">
            <div>
              <p class="label">{{$t('preliminary.Entity')}}</p>
              <div class="ipt">
                <Select v-model="searchParams.company" clearable
                        :placeholder="`${$t('common.selectInfo')}`">
                  <Option v-for="(item,index) of tagList" :value="item.name" :key="index">{{item.name}}</Option>
                </Select>
              </div>
            </div>
          </Col>
          <Col span="4">
            <div>
              <p class="label">{{$t('preliminary.Location')}}</p>
              <div class="ipt">
                <Cascader clearable
                          :data="orgList"
                          v-model="searchParams.orgId"
                          :transfer="true"
                          :placeholder="`${$t('common.selectInfo')}`">
                </Cascader>
              </div>
            </div>
          </Col>
          <Col span="4">
            <div>
              <p class="label">{{$t('preliminary.InstallStatus')}}</p>
              <div class="ipt">
                <Select v-model="searchParams.installStatus" filterable clearable
                        :placeholder="`${$t('common.selectInfo')}`">
                  <Option v-for="(item,index) of statusList" :value="item.id" :key="index">{{item.name}}</Option>
                </Select>
              </div>
            </div>
          </Col>
          <Col span="4">
            <div>
              <p class="label">{{$t('preliminary.ManufacturingNumber')}}</p>
              <div class="ipt">
                <Input type="text" v-model="searchParams.factoryNo"
                       :placeholder="`${$t('common.inputInfo')}`" class="inputBorder"
                       :maxlength="32"></Input>
              </div>
            </div>
          </Col>
          <Col span="4">
            <div>
              <p class="label hide-label">--</p>
              <div class="ipt">
                <Button class="search-btn" type="primary" @click="changeNum()" v-if="checkBtnPermission.dmsInstallPlanList">
                  {{ $t('common.Query') }}
                </Button>
                <Button
                    class="reset-btn"
                    @click="changeNum()"
                >{{ $t('common.reset') }}
                </Button>
              </div>
            </div>
          </Col>
        </Row>
      </div>
        <div class="list-layout mt16">
          <div class="btns clear">
            <span class="title">{{ $t('common.listInformation') }}</span>
            <Button  @click="handleOutRecords" v-if="checkBtnPermission.dmsInstallPlanExport">{{ $t('maintenance.Export') }}</Button>
          </div>
          <!--表格-->
          <div class="tableContent">
            <Table row-key="id"
                   @on-selection-change="onSelectChange"
                   :columns="columns" :data="dataSource">

              <template slot-scope="{ row }" slot="InstallStatus">
                <span v-if="row.installStatus === 0">
                  🔵{{ $t('preliminary.ToBeInstalled') }}
                </span>
                <span v-if="row.installStatus === 1">
                  🟢{{ $t('preliminary.Installing') }}
                </span>
                <span v-if="row.installStatus === 2">
                  🟣{{ $t('preliminary.Installed') }}
                </span>
              </template>

              <template slot-scope="{ row }" slot="action">
                    <span class="operationBtn" v-if="checkBtnPermission.dmsInstallPlanAdd && row.installStatus === 0"
                          @click="sendClick(row)"><i class="iconfont zy-common-neirong"></i>{{ $t('preliminary.Input') }}</span>
                <span class="operationBtn"
                      v-if="checkBtnPermission.dmsInstallPlanAddInstall && row.installStatus !== 2"
                      @click="recallClick(row)"><i class="iconfont zy-common-jieguo"></i>{{ $t('preliminary.CATResult') }}</span>
                <span class="operationBtn" v-if="checkBtnPermission.dmsInstallPlanGet"
                      @click="lockClick(row)"><i class="iconfont zy-common-chakan"></i>{{ $t('common.Check') }}</span>
              </template>
            </Table>
          </div>
          <!--分页-->
          <div class="pageWrap mt16">
            <pageLeftTitle :total="total" :selected="selectTable.length" />
            <Page :total="total" :page-size="pageSize" :page-size-opts="$variable.pageSizes" :current="pageNum"
                  @on-change="changePageNum" @on-page-size-change="changePageSize" show-sizer show-total/>
          </div>
        </div>
        <!--录入安装调试信息-->
<!--        <add-pdebugging-modal ref="addPdebuggingModal" @handleFresh="handleFresh"/>-->

        <result-debug-modal ref="resultDebugModal" @handleFresh="handleFresh"/>
    </div>
</template>

<script>
import fileDownload from 'js-file-download'
// import AddPdebuggingModal from "./modules/addPdebuggingModal";
import recursion from '../../../util/recursion'
import ResultDebugModal from "./modules/resultDebugModal";
import {findOrgByToken} from '@/api/index.js'

export default {
    name: "picking",
    components: {ResultDebugModal},
    data() {
        return {
            total: 0,
            pageSize: 10,
            pageNum: 1,
            searchParams: {},
            checkBtnPermission: {},
            tagList: [{id: '', name: this.$t('common.all')}],
            statusList: [
                {id: '', name: this.$t('common.all')},
                {id: 0, name: this.$t('preliminary.ToBeInstalled')},
                {id: 1, name: this.$t('preliminary.Installing')},
                {id: 2, name: this.$t('preliminary.Installed')},
            ],
            orgList: [],
            resultlist: [],
            pageSizeOption: [10, 20, 30],
            columns: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    title: `${this.$t('preliminary.InstallStatus')}`,
                    slot: 'InstallStatus',
                    align: 'center',
                    minWidth: 120
                },
                {
                    title: `${this.$t('preliminary.ContractNumber')}`,
                    key: 'contractNo',
                    align: 'center',
                    minWidth: 150
                },
                {
                    title: `${this.$t('preliminary.PurchasingOrderNumber')}`,
                    key: 'requestNo',
                    align: 'center',
                    minWidth: 120
                },
                {
                    title: `${this.$t('equipmentscrapped.AssetNo')}`,
                    key: 'assetsNo',
                    align: 'center',
                    minWidth: 150
                },
                {
                    title: `${this.$t('preliminary.EquipmentName')}`,
                    key: 'deviceName',
                    align: 'center',
                    minWidth: 140
                },
                {
                    title: `${this.$t('preliminary.ManufacturingNumber')}`,
                    key: 'factoryNo',
                    align: 'center',
                    minWidth: 170
                },
                {
                    title: `${this.$t('preliminary.Entity')}`,
                    key: 'belongCompanyName',
                    align: 'center',
                    minWidth: 150
                },
                {
                    title: `${this.$t('preliminary.Vendor')}`,
                    key: 'supplier',
                    align: 'center',
                    minWidth: 240
                },
                {
                    title: `${this.$t('preliminary.Location')}`,
                    key: 'position4',
                    align: 'center',
                    minWidth: 180
                },
                {
                    title: `${this.$t('preliminary.PlannedStartTime')}`,
                    key: 'planStartDate',
                    align: 'center',
                    minWidth: 150
                },
                {
                    title: `${this.$t('preliminary.PlannedFinishTime')}`,
                    key: 'planFinishDate',
                    align: 'center',
                    minWidth: 160
                },
                {
                    title: `${this.$t('preliminary.ActualDate')}`,
                    key: 'finishDate',
                    align: 'center',
                    minWidth: 120
                },
                // {
                //     title: '材料到位日期',
                //     key: 'installDate',
                //     align: 'center',
                //     minWidth: 120
                // },
                // {
                //     title: '材料是否到位',
                //     key: 'installMaterialStatusText',
                //     align: 'center',
                //     minWidth: 120
                // },
                {
                    title: `${this.$t('common.operation')}`,
                    slot: "action",
                    minWidth: 310,
                    align: "center",
                    fixed: 'right',
                }
            ],
            selectTable: [],
            dataSource: [{
                type: 'dd'
            }],
        }
    },
    created() {
        this.searchList()
        this.getCompanyList()
        this.getOrgList()
    },
    mounted() {
        let itemList = JSON.parse(window.localStorage.getItem('USER_URI'))
        for (let item of itemList) {
            if (item.code == "dmsInstallPlanList") {
                this.checkBtnPermission.dmsInstallPlanList = true
            }
            if (item.code == "dmsInstallPlanAdd") {
                this.checkBtnPermission.dmsInstallPlanAdd = true
            }
            if (item.code == "dmsInstallPlanGet") {
                this.checkBtnPermission.dmsInstallPlanGet = true
            }
            if (item.code == "dmsInstallPlanExport") {
                this.checkBtnPermission.dmsInstallPlanExport = true
            }
            if (item.code == "dmsInstallPlanAddInstall") {
                this.checkBtnPermission.dmsInstallPlanAddInstall = true
            }

        }
    },
    methods: {
        onSelectChange(val) {
            this.selectTable = val
        },
        /********************基础数据获取********************/
        //公司列表
        getCompanyList() {
            this.axios({
                method: 'get',
                url: '/basic/company/getCompanyListByUser',
                params: {}
            }).then(res => {
                
                if (res.code === 200) {
                    let arr = res.data.map(item => {
                        return {
                            ...item,
                            id: item.id.toString()
                        }
                    })
                    this.tagList = [...this.tagList, ...arr]
                } else {
                    this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
                }
            })
        },
        getOrgList() {
            let params = {
                level: 3
            }
            findOrgByToken(params).then(res => {
                if (res.code === 200) {
                    const obj = {
                        label: 'name',
                        value: 'code',
                        children: 'children'
                    }
                    this.orgList = recursion.convertTree(res.data, obj)
                } else {
                    this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
                }
            })
        },
        //刷新
        handleFresh() {
            this.searchList()
        },
        //导出
        handleOutRecords() {
            // if (!(this.selectTable && this.selectTable.length)){
            //   this.$Message.error('请勾选导出项!')
            //   return
            // }
            let ids = []
            if (this.selectTable && this.selectTable.length) {
                ids = this.selectTable.map(val => val.id)
            }
            let params = {};
            for (let key in this.searchParams) {
                if (key === 'orgId' && this.searchParams['orgId']) {
                    const arr = this.searchParams[key]
                    const {length, last = length - 1} = arr
                    this.$set(params, key, arr[last])
                } else {
                    if (this.searchParams[key]) {
                        this.$set(params, key, this.searchParams[key])
                    }
                }
            }
            let url = '/dms/dmsInstallPlan/export'
            // if (ids && ids.length){
            //   url = `/dms/dmsInstallPlan/export?ids=${ids.join(',')}`
            // }
            const filName = this.$t('acceptanceCheck.DeliveryAcceptanceRecord')
            this.axios({
                method: 'post',
                url: `/dms/dmsInstallPlan/export`,
                responseType: 'blob',
                data: {ids, ...params}
            }).then(res => {
                fileDownload(res, filName + '.xlsx')
            })
        },
        sendClick(row) {
            // this.$refs.addPdebuggingModal.show(row)
          this.$router.push({
            path: '/devBasic/earlierStage/pdebuggingInput',
            query: {
             ...row
            }
          })
        },
        recallClick(record) {
            this.$refs.resultDebugModal.show(record)
        },
        lockClick(row) {
            this.$router.push({
                path: '/devBasic/earlierStage/pdebugging/detailPdebuggingModal',
                query: {
                    deviceMId: row.deviceMId,
                    installStatus: row.installStatus
                }
            })
        },
        //分页
        changeNum() {
            this.pageNum = 1;
            this.searchList();
        },
        changePageSize(pageSize) {
            this.pageSize = pageSize;
            this.searchList();
        },
        changePageNum(val) {
            this.pageNum = val;
            this.searchList();
        },
        searchList() {
            let params = {
                pageNo: this.pageNum,
                pageSize: this.pageSize,
            };
            for (let key in this.searchParams) {
                if (key === 'orgId' && this.searchParams['orgId']) {
                    const arr = this.searchParams[key]
                    const {length, last = length - 1} = arr
                    this.$set(params, key, arr[last])
                } else {
                    if (this.searchParams[key] || key === 'installStatus') {
                        this.$set(params, key, this.searchParams[key])
                    }
                }
            }
            this.axios({
                method: 'get',
                url: '/dms/dmsInstallPlan/list',
                params: params
            }).then(res => {
                if (res.code === 200) {
                    this.dataSource = res.data.list
                    this.total = res.data.total
                } else {
                    this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
                }
            })
        },
    }
}
</script>

<style scoped lang="scss">
.picking {

    .formList {
        padding: 30px;

        .btn {
            margin-top: 20px;
            text-align: center;
            width: 100%;
            height: 40px;
        }

        .inputBorder {
            border: 1px solid #dcdee2;
            border-radius: 4px;

        }
    }


}

.ivu-input-number {
    width: -webkit-fill-available;
}
</style>

<style lang="scss">

</style>
